<template>
  <div class="wrapper">
    <el-col :span="24" class="action-bar">
      <el-input v-model="searchWords" class="action-bar-input" placeholder="请输入关键字"></el-input>
      <el-button type="primary" size="medium" @click="search">检索</el-button>
      <el-button type="primary" size="medium" @click="excelVisible=true">导出EXCEL</el-button>
      <el-button type="primary" size="medium" @click="addFormVisible = true">添加</el-button>
    </el-col>

    <!--列表-->
    <el-table :data="activityList" highlight-current-row class="el-table-style">
      <el-table-column type="index" width="75" sortable></el-table-column>
      <el-table-column prop="name" label="姓名" width="105" sortable></el-table-column>
      <el-table-column prop="cost" label="身份证号" width="100" sortable></el-table-column>
      <el-table-column prop="start_time" label="学历" min-width="160" sortable></el-table-column>
      <el-table-column prop="start_time" label="性别" min-width="160" sortable></el-table-column>
      <el-table-column prop="start_time" label="手机号" min-width="160" sortable></el-table-column>
      <el-table-column prop="start_time" label="年龄" min-width="160" sortable></el-table-column>
      <el-table-column prop="start_time" label="民族" min-width="160" sortable></el-table-column>
      <el-table-column prop="start_time" label="出生年月" min-width="160" sortable></el-table-column>
      <el-table-column prop="start_time" label="籍贯" min-width="160" sortable></el-table-column>
      <el-table-column prop="start_time" label="政治面貌" min-width="160" sortable></el-table-column>
      <el-table-column prop="start_time" label="入党时间" min-width="160" sortable></el-table-column>
      <el-table-column label="操作" width="700">
        <template slot-scope="scope">
          <el-button type="danger" class="danger-btn" size="primary">查看详情</el-button>
          <el-button type="danger" class="danger-btn" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pagesize"
          @current-change="pageChange"
        ></el-pagination>
      </div>
    </el-col>
    <!-- 新增 -->
    <el-dialog title="添加" :visible.sync="addFormVisible" width="40%">
      <el-form label-width="110px" label-position="left">
        <el-form-item label="姓名">
          <el-input style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-input style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="民族">
          <el-input style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="籍贯">
          <el-input style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌">
          <el-input style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="入党时间">
          <el-input style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="个人简介">
          <el-input type="textarea" style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="上传">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary">提交</el-button>
      </div>
    </el-dialog>

    <!-- 导出 -->
    <el-dialog title="导出excel" :visible.sync="excelVisible" width="40%">
      <el-form label-width="80px" >
        
        <el-form-item label="导出类型">
          <el-radio-group v-model="excelType">
            <el-radio :label="3">当前页</el-radio>
            <el-radio :label="6">全部</el-radio>
            <el-radio :label="9">自定义</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="已选" v-if="executorList.length!=0">
          <div v-for="(item,index) of executorList" :key="index" class="executorList">
            <div>
              <span>姓名：{{item.realname}}</span>
              <i class="el-icon-remove"  @click.stop="deleteExecutor(index)"></i>
            </div>
				</div>
        </el-form-item>
        <el-form-item label="搜索">
					<el-select
					v-model="executor"
					filterable
					remote
					:loading="loading"
					placeholder="输入姓名"
					@change="getExecutor"
					:remote-method="searchName"
						>
					<el-option
						v-for="(item,index) in vipList"
						:key="item.vip_id"
						:label="item.realname"
						:value="index">
            <div>
              {{item.realname}}&nbsp;&nbsp;&nbsp;{{item.phone}}
            </div>
					</el-option>
				</el-select>
				<el-button size="medium " type="primary" @click="addExecutor">添加</el-button>
				
				</el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchWords:'',//搜索的关键字
      excelVisible:false,
      addFormVisible: false,
      activityList:[],
      total:0,
      page:1,
      pagesize:16,

      excelType:'',
      vipList:[],//模糊搜索的下拉框数据
      executorList:[],
      loading:false,
      executor:''//搜索选中的数据
    };
  },
  methods: {
    search(){

    },
    pageChange(){

    },
    getExecutor(e){
			this.executor=e;
		},
		addExecutor(){
			//添加执行者
			if(isNaN(this.executor) || this.executor===''){
				return
			}
			const is_join= this.executorList.find(item=>{
				//判断是否已经在筛选的队列里
				return item.user_id==this.vipList[this.executor].user_id
			})
			if(is_join){
				this.executor='';
				return
			}
			this.executorList.push(this.vipList[this.executor]);
			this.executor='';
		},
		deleteExecutor(index){
			//删除执行者
			this.executorList.splice(index,1);
		},
		async searchName(name){
			//搜索用户名
			this.loading=true;
			if(!name){
				this.vipList=[];
				this.loading=false
				return
			}
			const res=await this.$api.getUserVipList ({
				page:0,
				pagesize:16,
				realname:name
			})
			if(res.data.level=='success'){
				this.vipList=res.data.data.user_vip_list
			}
			this.loading=false
    	},
  },
};
</script>
<style lang='scss' scoped>
.dialog-footer{
			text-align: center;
		}
</style>
